<template>
	<view class="pages">
		<view class="head">
			<view class="item">
				<image src="/static/images/orderdetail01.png" mode=""></image>
				<view class="left">联系人</view>
				<view class="right">{{orderInfoList.name}}</view>
			</view>
			<view class="item">
				<image src="/static/images/orderdetail02.png" mode=""></image>
				<view class="left">联系电话</view>
				<view class="right">{{orderInfoList.phone}}</view>
			</view>
			<view class="item">
				<image src="/static/images/orderdetail05.png" mode=""></image>
				<view class="left">下单时间</view>
				<view class="right">{{orderInfoList.create_time}}</view>
			</view>
			<view class="item" v-if="orderInfoList.coupon_price == 0 ? false : true">
				<image src="/static/images/orderdetail06.png" mode=""></image>
				<view class="left">优惠券抵扣</view>
				<view class="right">-{{orderInfoList.coupon_price}}元</view>
			</view>
			<view class="item" v-if="orderInfoList.balance == 0 ? false : true">
				<image src="/static/images/orderdetail07.png" mode=""></image>
				<view class="left">余额抵扣</view>
				<view class="right">-{{orderInfoList.balance}}元</view>
			</view>
			<view class="item" :class="orderInfoList.type == 1 ? 'noborder' : 'ZW'">
				<image src="/static/images/orderdetail03.png" mode=""></image>
				<view class="left">订单编号</view>
				<view class="right">{{orderInfoList.ordersn}}</view>
			</view>
			<view class="item" style="border: none" v-if="orderInfoList.type == 2 ? true : false">
				<image src="/static/images/orderdetail04.png" mode=""></image>
				<view class="left">收货地址</view>
				<view class="right">{{orderInfoList.address}}</view>
			</view>
			<view class="border">
				<image src="/static/images/border.png" mode=""></image>
			</view>
		</view>
		<view class="shoeList">
			<view class="item" v-for="(item, index) in orderInfoList.service" :key="index">
				<view class="imgBox">
					<image src="/static/images/logo.jpg" mode=""></image>
				</view>
				<view class="right">
					<view class="severTitle">[{{orderInfoList.type == 1 ? '门店' : '邮寄'}}] <text>{{' ' + item.standard_service_title + ' '}}</text><text v-for="(it, ind) in item.additional" :key="ind">{{it.title + ' '}}</text></view>
					<view class="severInfo">
						<view class="label">品质保障</view>
						<view class="price">￥<text>{{item.price}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="left">
				应付金额: ￥{{orderInfoList.payable_price}}
			</view>
			<button @click="payBtn">立即支付</button>
		</view>
	</view>
</template>

<script>
	import { HTTP } from '@/pages/http.js';
	let http = new HTTP();
	export default {
		data(){
			return {
				orderInfoList: {},
				serveTitle: '',
				id: null
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.orderInfo(e.id);
			// this.orderInfo(40)
		},
		methods:{
			//右上角分享功能
			onShareAppMessage: function (res) {
			  return {
			    title: 'unclearcare 球鞋洗护',
			    path: '/pages/index/index',
			    success: function (res) {
				  // 转发成功
			    },
			    fail: function (res) {
				  // 转发失败
			    }
			  }
			},
			orderInfo(id){//获取订单详情
				uni.showLoading({
					title: '加载中..'
				});
				http.request({
					url: 'order/detail',
					data:{
						id
					},
					success:(res)=>{
						uni.hideLoading();
						if(res.data.code == 200){
							this.orderInfoList = res.data.data;
						}
					}
				})
			},
			payBtn(){//立即支付
				http.request({
					url: 'order/pay',
					data: {
						id: this.id
					},
					success:(res)=>{
						if(res.data.code == 200){
							uni.requestPayment({
							    provider: 'wxpay',
							    timeStamp: res.data.data.timeStamp+'',
							    nonceStr: res.data.data.nonceStr,
							    package: res.data.data.package,
							    signType: res.data.data.signType,
							    paySign: res.data.data.paySign,
							    success: (res)=>{
									uni.showToast({
										title:'支付成功!'
									});
									setTimeout(()=>{
										uni.switchTab({
											url: '/pages/index/index'
										})
									},2000)
							    },
							    fail: function (err) {
									uni.showToast({
										icon: 'none',
										title:'支付失败!'
									});
									setTimeout(()=>{
										uni.navigateTo({
											url: '/pages/me/order/index?num=' + 0
										})
									},2000)
							    }
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		min-height: 100%;
		background-color: #f5f5f9;
	}
	.pages{
		background-color: #f5f5f9;
		padding-top: 20upx;
		min-height: 100%;
		padding-bottom: 120upx;
		font-size: 30upx;
		.head{
			background-color: #fff;
			margin-bottom: 20upx;
			.item{
				position: relative;
				display: flex;
				border-bottom: 1px solid #eee;
				height: 80upx;
				line-height: 80upx;
				padding: 0 30upx;
				justify-content: space-between;
				image{
					position: absolute;
					top: 15upx;
					left: 30upx;
					width: 50upx;
					height: 50upx;
				}
				.left{
					padding-left: 60upx;
					width: 210upx;
				}
				.right{
					width: calc(100% - 30upx - 180upx);
					text-align: right;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis
				}
			}
			.noborder{
				border: none;
			}
			.border{
				width: 100%;
				height: 8upx;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
		.shoeList{
			.item{
				padding: 20upx 30upx;
				margin-bottom: 20upx;
				display: flex;
				background-color: #fff;
				.imgBox{
					width: 160upx;
					height: 160upx;
					margin-right: 20upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.right{
					width: calc(100% - 160upx - 15upx);
					.severTitle{
						width: 100%;
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						height: 80upx;
					}
					.severInfo{
						position: relative;
						height: 80upx;
						.label{
							position: absolute;
							left: 0;
							bottom: 0;
							width: 80upx;
							text-align: center;
							height: 30upx;
							line-height: 30upx;
							color: #fff;
							font-size: 17upx;
							background-color: #000;
						}
						.price{
							position: absolute;
							right: 0;
							bottom: -5upx;
							color: #000;
							font-weight: bold;
							font-size: 24upx;
							text{
								font-size: 32upx;
							}
						}
					}
				}
			}
			
		}
		.footer{
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			width: 100%;
			height: 120upx;
			line-height: 120upx;
			display: flex;
			justify-content: space-between;
			.left{
				width: 70%;
				height: 100%;
				font-size: 32upx;
				padding-left: 30upx;
			}
			button{
				width: 30%;
				height: 100%;
				line-height: 120upx;
				font-size: 30upx;
				background-color: #000;
				color: #fff;
				border-radius: 0;
			}
		}
	}
</style>
